<template>
  <div class="all_box_coantianer w">
    <div class="calssify_box">
      <div @click="complete">全部商品</div>
      <div
        v-for="(item,index) in classify"
        :key="index"
        @click="onClickClassify(item.category_id)"
      >
        {{ item.category_name }}
      </div>
    </div>
    <div
      class="all_commodity_box"
      v-for="(item,index) in showList"
      :key="index"
    >
      <img :src="'http://47.115.85.237:3000/' + item.product_picture" alt="" />
      <p>{{ item.product_name }}</p>
      <p>{{ item.product_title }}</p>
      <p>
        <b>￥{{ item.product_selling_price }}</b>
        <s> ￥{{ item.product_price }} </s>
      </p>
      <button @click="add(item)">加入购物车</button>
    </div>
  </div>
</template>

<script>
import {getProductByCategory,getAllProduct, getCategory } from "../api/types";

export default {
  data() {
    return {
      all: [],
      classify: [],
      showList: [],
    };
  },
  created() {
    getAllProduct().then((res) => {
      //全部商品
      console.log(res);
      this.all = res.Product;
      this.showList = res.Product;
    });
    getCategory().then((res) => {
      //分类
      console.log(res);
      this.classify = res.category;
    });
  },
  methods: {
    onClickClassify(id) {
      console.log(11);
      this.showList = [];
      // console.log(this.List)
      this.all.forEach((item,) => {
        if (item.category_id == id) {
          this.showList.push(item);
        }
      });
    },
    complete() {
      this.showList = this.all;
    },
    add(item) {
      this.$store.commit("add", item);
    },
  },
};
</script>
<style lang="scss">
.all_box_coantianer {
  // height: 800px;
  background-color: #f4f4f4;
  display: inline-flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.w {
  width: 1200px;
  margin: 0 auto;
}
.calssify_box {
  width: 100%;
  height: 50px;
  background-color: #ffff;
  display: inline-flex;
  justify-content: space-around;
  align-items: center;
  div {
    width: 10%;
    height: 50%;
    border: 1px solid;
    cursor: pointer;
  }
}

.all_commodity_box {
  width: 15%;
  height: 300px;
  background-color: #fff;
  margin: 10px 0px;
  z-index: 666;
  img {
    width: 100%;
    height: 70%;
  }
  p {
    font-size: 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 5px 0px;
    b {
      font-size: 13px;
      font-weight: 700;
      color: red;
    }
  }
  button {
    width: 100px;
    height: 25px;
    background-color: #ffff;
    border: 1px solid red;
    color: red;
    cursor: pointer;
  }
}
.all_commodity_box:hover {
  transform: scale(1.05);
  transition: all 1s;
}
</style>